<template>
  <div>
    <div class="top_nav">
      <div style="width:100%;height:5vh;border:1px solid white"></div>
      <div style="width:100%;height:1vh;"></div>
      <div class="top_nav_img">
        <img
          src="https://p0.meituan.net/waimaipoi/b7c56cd9c46721107c3e1e1769ccace840787.jpg"
          width="100%"
          height="100%"
          alt
        />
      </div>

      <div style=" margin-left:3%;width:62%;height:40%;float:left;margin-top:8%">
        <p style="color:white">棒打鲜饮</p>
        <br />
        <p style="color:#fdfdfd;font-size:13px">新品上市，棒打鲜橙，现切现捣</p>
      </div>
    </div>

    <!-- //大div -->
    <div class="top_big_big">
      <div class="top_big">
        <div v-for="(item, index)  in mtlist_right" :key="index">
          <p
            @click="onclick(index)"
            style="text-align:center ;height:8vh;line-height:8vh"
            :class="mtindex===index?'titile_top':'titile_top_active'"
          >{{item.anchor_point}}</p>
        </div>
      </div>
      <div class="top_little" ref="rightContainer" @touchstart="onTouchStart">
        <div ref="rightContent" v-for="(item, index)  in mtlist_right" :key="index">
          <div style="border-top:1px solid gray">{{item.anchor_point}}</div>
          <div v-for="(item1, index1)  in item.commodity_list" :key="index1">
            <div style="width:100%;height:10vh;background:gary; float:left;margin-top:7%">
              <div class="div_img">
                <img :src="item1.comm_image" width="100%" height="100%" alt />
              </div>
              <h3 style="float:left;margin-left:2%">
                {{item1.comm_title}}
                <h5
                  style="color:gray;display: inline-block;white-space: nowrap; width: 100%; overflow: hidden;text-overflow:ellipsis;"
                ></h5>
                <div style="color:red">
                  <span>￥</span>
                  <span style="font-size:22px">{{item1.fabulous}}</span>
                </div>
              </h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      mtlist_right: [],
      mtlist_left: [],
      mtindex: 0,
    };
  },
  methods: {
    onclick(index) {
      this.mtindex = index;
      //点击触发 移除滚动事件监听
      this.$refs.rightContainer.removeEventListener(
        "scroll",
        this.scrollHandle
      );
      //获取点击后 一级分类对应二级分类的块
      // console.log(this.$refs.rightContent);
      var contentViews = this.$refs.rightContent;
      var targetView = contentViews[this.mtindex];
      targetView.scrollIntoView({ behavior: "smooth" });
    },
    scrollHandle() {
      var target = event.target;
      //获取右侧的滚动距离
      var scrollOffset = target.scrollTop;
      // console.log(scrollOffset);
      //当滚动距离等于 元素距离文档顶部的距离时，元素已经到达了屏幕的顶部
      //获取右侧所有块
      var contentViews = this.$refs.rightContent;
      for (let index = 0; index < contentViews.length; index++) {
        //判断滚动距离是否大于等于对的某一块元素距离文档顶部的距离
        //小于下一块距离文档顶部的距离
        //offsetTop:获取元素距离文档顶部的距离
        if (
          scrollOffset >= contentViews[index].offsetTop &&
          scrollOffset < contentViews[index + 1].offsetTop
        ) {
          this.mtindex = index;
        }
      }
    },
    onTouchStart() {
      console.log("111111111111");
      this.$refs.rightContainer.addEventListener("scroll", this.scrollHandle);
    },
  },
  mounted() {
    axios
      .get("http://localhost:8080/shoplist.json")
      .then((res) => {
        console.log(res.data);
        this.mtlist_right = res.data;
        console.log(this.mtlist_right);
      })
      .catch((err) => {
        console.error(err);
      });
  },
};
</script>

<style scope>
.div_img {
  float: left;
  width: 30%;
  height: 100%;
  background: seagreen;
  margin-left: 5%;
}
.top_nav {
  width: 100%;
  height: 20vh;
  float: left;
  background-color: rgb(0, 0, 0);
}
.top_big_big {
  width: 100%;
  height: 80vh;
  float: left;
}
.titile_top {
  color: rgb(0, 0, 0);
  background: white;
}
.titile_top_active {
  color: rgb(85, 85, 85);
}
.top_big {
  width: 20%;
  float: left;
  height: 80vh;
  background: rgb(240, 239, 239);
  overflow: scroll;
}
.top_little {
  float: left;
  width: 80%;
  overflow: scroll;
  height: 80vh;
  background: rgb(255, 255, 255);
}
.top_nav_img {
  width: 30%;
  height: 60%;
  background: rgb(51, 255, 0);
  margin-left: 5%;
  float: left;
}
</style>